<script lang="ts" setup>
import { ref } from 'vue'

const showBottom = ref(false)
const active = ref(0)


</script>


<template>
    <div class="detail">

        <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '70%' }" closeable
            style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
            <div class="title"
                style="text-align: center; width: 100%;height: 50px;line-height: 50px; font-size: 18px; color: #000;border-bottom: 2px solid #c8c9cc;">
                <span style=" ">景区公告</span>
            </div>

            <div class="content" style="padding: 20px;">
                <p style="color: #333; font-size: 16px; font-weight: bold;">出行公告</p>
                <p><span
                        style="font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;font-weight:700;">北京市内游重要信息提醒</span>
                </p>

                <p><span
                        style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;">北京近日发布重要疫情防控措施提醒:“进返京人员抵京后7天内不聚餐、不聚会、不前往人群密集场所”，进入文旅场所(室内场所)时须满足“7天内无京外旅居史”。所有出京旅行及自驾游人员返京要主动报备，进返京后开展3天2检。请您密切关注，其他常态化疫情防控措施具体如下：</span>
                </p>

                <p><span
                        style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;">1、北京市暂不恢复进出京跨省团队旅游及“机票+酒店”业务，继续暂停出入境团队旅游及“机票+酒店”业务。北京市内团队游等旅游活动旅行社和在线旅游平台可以开展但不接受京外游客报名，参加团队旅游人员（含游客、导游、司机、随团其他工作人员等全口径参团人员）应完成新冠疫苗全程接种或加强免疫接种（全程接种六个月以上的，应提供加强免疫接种证明）。其中：</span>
                </p>
                <p><span
                        style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;">不满3周岁的未成年人参团可不提供新冠疫苗接种证明；3周岁以上不满18周岁的未成年人参团应提供新冠疫苗全程接种证明，不必提供加强免疫接种证明；18周岁以上的成年人参团应完成新冠疫苗全程接种或加强免疫接种（全程接种六个月以上的，应提供加强免疫接种证明），不适宜接种人员可凭北京“健康宝”中禁忌筛查判定证明（显示不适宜接种）参团。（温馨提示：据悉，北京各疫苗接种点已开展禁忌筛查判定工作，详情可询疫苗接种点或疾控部门。）</span>
                </p>
                <p><span
                        style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;">2、除跟团游玩外采取其他方式在北京游玩的，请注意：市民群众在严格测温扫码和查验48小时内核酸检测阴性证明后即可正常进入市内各类公共场所。</span>
                </p>
            </div>


        </van-popup>
        <header class="tourism-header">

            <div class="back">
                <div class="left" @click="$router.go(-1)">
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u579.svg"></van-image>
                </div>
                <div class="right" @click="$router.push('/mylogin/order')">
                    <span> <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u577.svg"></van-image></span>
                </div>
            </div>
        </header>

        <main class="tourism-main">
            <div class="tourism-main-title">
                <p style="padding-top: 20px;padding-left: 10px;"><span
                        style="color: #333;font-size: 22px;font-weight: bold;">故宫博物馆</span>
                    <span style="color: #666;margin-left: 10px;">5A</span>
                </p>
                <p
                    style="background:linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%); width: 230px; height: 30px; line-height: 30px; text-align: center; margin-top: 10px; margin-left: 10px; color: white; font-size: 12px; border-radius: 35px;">
                    <span>4.8分</span><span style="margin-left: 10px;">12345人评价</span> <span
                        style="margin-left: 10px;">相册
                        <span style="padding: 0 10px;">|</span><span>游记</span></span>
                </p>
            </div>

            <div class="tourism-main-content">
                <div class="left">
                    <div class="tourism-main-content-left">
                        <p style="font-weight:700;color:#05B288;">
                            开园中</p>
                        <p>今日(周五)</p>
                        <p>08:30-16:30 开放</p>
                    </div>
                    <div class="tourism-main-content-right">
                        <span style="color: #6799f9;">景点详情></span>
                    </div>
                </div>
                <div class="right" @click="$router.push('/map')">
                    <div class="tourism-main-content-left">
                        <p>北京市东城区</p>
                        <p style="font-size: 12px; color: #999;">距地铁1号线八通线…</p>
                    </div>
                    <div class="tourism-main-content-right">
                        <span>
                            <p><van-image
                                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u593.svg"></van-image>
                            </p>
                            <p>地图</p>
                        </span>
                    </div>
                </div>
            </div>

            <van-notice-bar scrollable text="公告：入园通知！" style="margin: 10px auto; width: 85%; border-radius: 10px;"
                color="#ff0000" @click="showBottom = true" />

            <van-image
                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u625.svg"></van-image>

            <div class="date-list">
                <p :class="{ active: active === 0 }" @click="active = 0">订今日</p>
                <p :class="{ active: active === 1 }" @click="active = 1">订明日</p>
                <p :class="{ active: active === 2 }" @click="active = 2">订11月27日</p>
                <p :class="{ active: active === 3 }" @click="active = 3">更多日期></p>
            </div>

            <div class="tourism-main-content-bottom">
                <div class="title" style="padding-top:10px;margin-left: 10px;">
                    <p style="font-size: 18px;font-weight: bold;color: #333; ">门票</p>
                    <p style="color: #ff9900;">优待政策></p>
                    <p style="color: #999;">累计销量5.1万+</p>
                </div>

                <div class="content" v-for="item in 3">
                    <div class="left">
                        <p>
                        <p style="font-size:16px;"><span
                                style="font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;font-weight:700;">故宫门票(不含内馆)-成人票</span>
                        </p>
                        </p>
                        <p><span style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;color:#666666;">年龄18周岁（不含）~60周岁（不含）…
                                ＞</span></p>
                        <p style="font-size:12px;"><span
                                style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;color:#05B288;">有条件退</span><span
                                style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;color:#666666;">&nbsp;
                            </span><span
                                style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;color:#CCCCCC;">|</span><span
                                style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;color:#666666;">&nbsp;
                                无需取票</span></p>
                        <p style="font-size:12px;"><span
                                style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;color:#666666;">已售2.2万+&nbsp;
                            </span><span
                                style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;color:#CCCCCC;">|</span><span
                                style="font-family:'Arial Normal', 'Arial', sans-serif;font-weight:400;color:#666666;">&nbsp;
                                购买须知 ＞</span></p>
                    </div>
                    <div class="right">
                        <p style="position: relative; right: -30px;"><span style="color: red;">￥</span><span
                                style="color: red; font-size: 24px;">40</span></p>
                        <button>立即预定</button>
                    </div>
                </div>
            </div>

        </main>

        <footer class="tourism-footer">
            <input type="text" placeholder="写评论">
            <div style="position: relative;top: 10px; margin-right: 10px;">
                <van-image
                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u642.svg"></van-image>
                <p>收藏</p>
            </div>
            <button>前往预定</button>
        </footer>

    </div>
</template>


<style scoped lang="scss">
.detail {
    height: 100%;
    width: 100%;

    .back {
        width: 375px;
        height: 300px;
        display: flex;
        justify-content: space-between;
        background-image: url('https://img1.baidu.com/it/u=514951134,1578019255&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1731862800&t=e9137d8ff5c938fa06ba6b5ebeaab60f');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;

        .left {
            position: absolute;
            top: 30px;
            left: 20px;
        }

        .right {
            position: absolute;
            top: 30px;
            right: 20px;
        }
    }

    .tourism-main {
        width: 100%;
        height: 500px;
        background-color: white;
        bottom: 80px;
        margin: 0 auto;
        border-radius: 10px;

        .tourism-main-content {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;

            .left {
                width: 160px;
                height: 90px;
                padding: 5px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: rgba(97, 229, 196, 0.1);
                border-radius: 10px;
            }

            .right {
                width: 160px;
                height: 90px;
                padding: 5px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: rgba(74, 65, 248, 0.1);
                border-radius: 10px;
            }
        }

        .date-list {
            display: flex;
            justify-content: space-around;
            margin: 5px auto;

            p {
                font-size: 13px;
                color: #333;
                background-color: #f5f5f5;
                padding: 5px;
                border-radius: 35px;
            }

            .active {
                border: 1px solid #1e05dc;
                background-color: white;
                color: #1e05dc;
            }
        }

        .tourism-main-content-bottom {
            width: 100%;
            height: 100%;
            background-color: rgba(244, 249, 255, 1);
            border-radius: 10px;
            padding-bottom: 120px;

            .content {
                width: 95%;
                height: 20px;
                background-color: white;
                margin: 0 auto;
                border-radius: 10px;
                display: flex;
                justify-content: space-between;
                overflow: hidden;
                margin-top: 20px;


                .left {
                    margin-left: 20px;
                }

                .right {
                    margin-right: 20px;

                    button {
                        width: 75px;
                        height: 30px;
                        border-radius: 35px;
                        background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
                        border: none;
                        color: white;
                        position: relative;
                        top: 30px;
                        font-size: 14px;

                    }
                }


            }
        }
    }

    .tourism-footer {
        width: 100%;
        height: 77px;
        background-color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        border-top: 1px solid #e5e5e5;

        input {
            width: 40%;
            height: 40px;
            border-radius: 30px;
            border: none;
            padding-left: 30px;
            background-color: #f5f5f5;
        }

        button {
            width: 110px;
            height: 40px;
            border-radius: 10px;
            background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
            border: none;
            margin-right: 30px;
            color: white;
        }

    }



}
</style>